<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./src/zondy_api/include-openlayers-local.js"></script>
    <script src="./src/map_libs/TDmap.js"></script>
    <style type="text/css">
      body,
      html,
      div,
      ul,
      li,
      iframe,
      p,
      img {
        border: none;
        padding: 0;
        margin: 0;
      }

      #mapCon {
        width: 100%;
        top: 60px;
        bottom: 0px;
        position: absolute;
      }

      #menu {
        height: 50px;
        padding: 5px 10px;
        font-size: 14px;
        font-family: '微软雅黑';
        left: 10px;
      }

      #div1 {
        text-align: right;
        float: left;
        display: inline;
        width: 35%;
        height: 100%;
        padding-top: 16px;
      }

      #div2 {
        text-align: left;
        float: left;
        display: inline;
        width: 65%;
        height: 100%;
      }

      .lb {
        margin-left: 5px;
      }
    </style>
  </head>
  <body>
    <div id="menu">
      <div id="div1">设置热点图的参数：</div>
      <div id="div2">
        <div>
          <label class="lb">热点半径（radius size）：</label
          ><input
            type="range"
            id="radius"
            min="1"
            max="50"
            step="1"
            value="10"
          />
        </div>
        <div>
          <label class="lb">模糊尺寸（blur size）：</label
          ><input type="range" id="blur" min="1" max="50" step="1" value="15" />
        </div>
      </div>
    </div>
    <div id="mapCon"></div>
    v>
    <script>
      var heatData = {
        type: 'FeatureCollection',
        features: [
          { type: 'Point', coordinates: [104.4, 31.19], count: 100 },
          { type: 'Point', coordinates: [113.3, 30.6], count: 19 },
          { type: 'Point', coordinates: [123.3, 30.6], count: 419 },
          { type: 'Point', coordinates: [105.3, 30.6], count: 319 },
          { type: 'Point', coordinates: [106.3, 30.6], count: 719 },
          { type: 'Point', coordinates: [109.3, 31.6], count: 519 },
          { type: 'Point', coordinates: [109.3, 30.6], count: 319 },
          { type: 'Point', coordinates: [108.3, 32.6], count: 139 },
          { type: 'Point', coordinates: [118.3, 31.6], count: 129 },
          { type: 'Point', coordinates: [108.3, 33.6], count: 190 },
          { type: 'Point', coordinates: [108.3, 32.6], count: 189 },
          { type: 'Point', coordinates: [100.3, 30.6], count: 1 },
          { type: 'Point', coordinates: [109.3, 30.6], count: 119 },
          { type: 'Point', coordinates: [108.3, 31.6], count: 200 },
          { type: 'Point', coordinates: [118.3, 30.6], count: 300 },
        ],
      }

      var blur = document.getElementById('blur')
      var radius = document.getElementById('radius')
      // 创建一个Heatermap图册图层
      var format
      var vector = new ol.layer.Heatmap({
        //矢量数据源（读取本地的KML数据）
        source: new ol.source.Vector({
          format: new Zondy.Format.PolygonJSON(),
          features: format.readFeatures(heatData),
          // url: './01.kml',
          // format: new ol.format.KML({
          //   extractStyles: false,
          // }),
        }),
        //热点半径
        radius: parseInt(radius.value, 10),
        //模糊尺寸
        blur: parseInt(blur.value, 10),
      })

      //为矢量数据源添加addfeature事件监听
      vector.getSource().on('addfeature', function (event) {
        // 示例数据2012_Earthquakes_Mag5.kml，可从其地标名称提取地震信息
        //要素的名称属性
        var name = event.feature.get('name')
        //得到要素的地震震级属性（magnitude）
        // var magnitude = parseFloat(name.substr(2))
        //设置要素的weight属性
        // event.feature.set('weight', magnitude - 5)
      })

      var TiandiMap_vec = new ol.layer.Tile({
        title: '高德地图_矢量图层',
        source: new ol.source.XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
          wrapX: false,
          crossOrigin: 'Anonymous',
        }),
      })

      var TiandiMap_cva = new ol.layer.Tile({
        title: '高德地图_卫星地图',
        source: new ol.source.XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',
          wrapX: false,
          crossOrigin: 'Anonymous',
        }),
      })

      //实例化Map对象加载地图（底图+热点图）
      var map = new ol.Map({
        layers: [TiandiMap_vec, TiandiMap_cva, vector],
        target: 'mapCon',
        view: new ol.View({
          center: [0, 0],
          minZoom: 2,
          zoom: 2,
        }),
      })
      //分别为另个参数设置控件（input）添加事件监听，动态设置热点图的参数
      radius.addEventListener('input', function () {
        //设置热点图层的热点半径
        vector.setRadius(parseInt(radius.value, 10))
      })
      blur.addEventListener('input', function () {
        //设置热点图层的模糊尺寸
        vector.setBlur(parseInt(blur.value, 10))
      })
    </script>
  </body>
</html>
